<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div>
        <label for="">姓名：</label>
        <input type="text" class="username">
        <span class="user_span">用户名由数字字母组成的4-8位，数字不能开头</span>
    </div>
    <div>
        <label for="">手机号：</label>
        <input type="text" class="userPhone">
        <span class="phone_span">11位的手机号</span>
    </div>
    <div>
        <label for="">昵称：</label>
        <input type="text" class="nickName">
        <span class="nick_span">2-4位的中文</span>
    </div>
    <div>
        <label for="">密码：</label>
        <input type="text" class="password">
        <span class="pass_span">密码由数字字母组成的6位</span>
    </div>
    <div>
        <label for="">验证码：</label>
        <input type="text" class="code">
        <span class="showCode">1d2s</span>
        <span class="code_span">验证码不分大小写</span>
    </div>

    <div>
        <button class="reg" disabled>注册</button>
    </div>

    <script>

        var oUser = get('.username');   // 自己封装的函数get ........
        var oReg = get('.reg');
        var oUserSpan = get('.user_span');

        var oPwd = get('.password');
        var oPwdSpan = get('.pass_span');


        // 用来判断输入是否正确
        var userFlag = false, pwdFlag = false;





        // 用户名绑定事件
        oUser.oninput = function () {
            // 用户名的验证    为空  长度不对  数字开头   非法  
            var username = this.value.trim();
            // 验证为空
            if (!/./.test(username)) {
                tips(oUserSpan, '用户名不能为空', 'red');
                userFlag = false;
                oReg.disabled = true;
                return;
            }
            // 长度   4-8
            if (!/^.{4,8}$/.test(username)) {
                tips(oUserSpan, '长度必须是4-8', 'red');
                userFlag = false;
                oReg.disabled = true;
                return;
            }
            // 数字开头
            if (/^\d/.test(username)) {
                tips(oUserSpan, '数字不能开头', 'red');
                userFlag = false;
                oReg.disabled = true;
                return;
            }

            // 判断是否非法的
            if (/\W/.test(username)) {
                tips(oUserSpan, '只能是数字字母下划线组成', 'red');
                userFlag = false;
                oReg.disabled = true;
                return;
            }

            tips(oUserSpan, '√', 'green');
            userFlag = true;

            if (userFlag && pwdFlag) {
                oReg.disabled = false;
            }
        }


        // 密码绑定事件
        oPwd.onblur = function () {
            // 用户名的验证    为空  长度不对  数字开头   非法  
            var password = this.value.trim();
            // 验证为空
            if (!/./.test(password)) {
                tips(oPwdSpan, '用户名不能为空', 'red');
                pwdFlag = false;
                oReg.disabled = true;
                return;
            }
            // 长度   4-8
            if (!/^.{4,8}$/.test(password)) {
                tips(oPwdSpan, '长度必须是4-8', 'red');
                pwdFlag = false;
                oReg.disabled = true;
                return;
            }

            // 判断是否非法的
            if (/\W/.test(password)) {
                tips(oPwdSpan, '只能是数字字母下划线组成', 'red');
                pwdFlag = false;
                oReg.disabled = true;
                return;
            }



            tips(oPwdSpan, '√', 'green');


            pwdFlag = true;


            if (userFlag && pwdFlag) {
                oReg.disabled = false;
            }


        }


        // 手机号
        //    为空
        //    长度
        //    数字   \D
        //    1




        function get(el) {
            return document.querySelector(el);
        }

        function tips(span, str, color) {
            span.innerHTML = str;
            span.style.color = color;
        }


    </script>



</body>

</html>